function startDraw(document) {

}
var canvas = null;

var ctx = null;
var vpx = 0;
var vpy = 0;
var Radius = 300; //整体大球的坐标
var LayerBallNum = 360 / 36; // 横向
var LayerIntervalUp = 360 / 36; //
var balls = [];
var angleX = Math.PI / 180;
// angleX = 0;
var angleY = Math.PI / 180;
var avatars = []
// var avatar = new Image();
// avatar.src = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
let temp = localStorage.getItem("choujiang-user-list")
var userList = JSON.parse(temp);
userList.forEach(element => {
    var avatar = new Image();
    avatar.src = element.avatar;
    let m = {name:element.username,avatar:avatar}
    avatars.push(m)
});
var randomIndex = 0;

// window.addEventListener("mousemove", function (event) {
//     var x = event.clientX - canvas.offsetLeft - vpx;
//     var y = event.clientY - canvas.offsetTop - vpy;

//     angleY = -x * 0.0001;
//     angleX = -y * 0.0001;
// });

var Animation = function (document) {
    canvas = document.getElementById("choujiang");
    canvas.style.display = "none"
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    ctx = canvas.getContext("2d")
    vpx = canvas.width / 2;
    vpy = canvas.height / 2;
    this.init();
};

Animation.prototype = {
    isrunning: false,
    init: function () {
        var num = LayerIntervalUp / 2; //layer 的数目    //假定每一层 间隔30  画上半球
        for (var i = 0; i <= num; i++) {
            var l = new layer(i, 1);
            l.draw();
            var l2 = new layer(i, -1);
            l2.draw();
        }

    },

    start: function () {
        this.isrunning = true;
        animate();
    },
    stop: function () {
        this.isrunning = false;
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    rotateX();
    rotateY();
    rotateZ();

    for (var i = 0; i < balls.length; i++) {
        balls[i].paint();
    }
    if (animation.isrunning) {
        requestAnimationFrame(animate);
    }
}


var layer = function (num, up) {
    this.radius = Math.sqrt(Math.pow(Radius, 2) - Math.pow(Radius * Math.cos(num * Math.PI * 2 /
        LayerBallNum), 2))
    this.x = 0;
    this.y = 0;
    this.up = up;
}

layer.prototype = {
    setBalls: function (radius) {
        for (var i = 0; i < LayerBallNum + Math.random() * 50; i++) {
            var angle = 2 * Math.PI / LayerBallNum * i;
            // var b = new ball(radius * Math.cos(angle), radius * Math.sin(angle), this.up * Math.sqrt(
            //     Math.pow(Radius, 2) - Math.pow(radius, 2)), 1.5);
            var b = new ball(radius * Math.cos(angle), radius * Math.sin(angle), this.up * Math.sqrt(
                Math.pow(Radius, 2) - Math.pow(radius, 2)), 1.5);
            b.paint();
            balls.push(b);
        }

    },
    draw: function () {
        ctx.beginPath();
        ctx.arc(vpx, vpy, this.radius, 0, 2 * Math.PI, true);
        ctx.strokeStyle = "#FFF";
        ctx.stroke();
        this.setBalls(this.radius);
    }
}

var ball = function (x, y, z, r) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.r = r;
    this.width = 2 * r;
}

ball.prototype = {
    paint: function () {
        var fl = 450 //焦距
        ctx.save();
        ctx.beginPath();
        var scale = fl / (fl - this.z);
        var alpha = (this.z + Radius) / (2 * Radius);
        // ctx.arc(vpx + this.x, vpy + this.y, this.r * scale+5, 0, 2 * Math.PI, true);
        ctx.fillStyle = "rgba(255,255,255," + (alpha + 0.5) + ")";
        // ctx.fillRect(vpx+this.x,vpy+this.y,20,20)
        if(randomIndex==avatars.length){
            randomIndex = 0;
        }
        ctx.drawImage(avatars[randomIndex].avatar, vpx + this.x, vpy + this.y, 30 * scale, 30 * scale);
        ctx.font = 6 * scale + "px Arial"
        ctx.fillText(avatars[randomIndex].name, vpx + this.x + 15, vpy + this.y - 10)
        ctx.fill();
        ctx.restore();
        randomIndex++;
    }
}

function rotateX() {
    var cos = Math.cos(angleX);
    var sin = Math.sin(angleX);
    for (var i = 0; i < balls.length; i++) {
        var y1 = balls[i].y * cos - balls[i].z * sin;
        var z1 = balls[i].z * cos + balls[i].y * sin;
        balls[i].y = y1;
        balls[i].z = z1;
    }
}

function rotateY() {
    var cos = Math.cos(angleY);
    var sin = Math.sin(angleY);
    for (var i = 0; i < balls.length; i++) {
        var x1 = balls[i].x * cos - balls[i].z * sin;
        var z1 = balls[i].z * cos + balls[i].x * sin;
        balls[i].x = x1;
        balls[i].z = z1;
    }
}

function rotateZ() {
    var cos = Math.cos(angleY);
    var sin = Math.sin(angleY);
    for (var i = 0; i < balls.length; i++) {
        var x1 = balls[i].x * cos - balls[i].y * sin;
        var y1 = balls[i].y * cos + balls[i].x * sin;
        balls[i].x = x1;
        balls[i].y = y1;
    }
}

var animation = null;
export const load = (document) => {
    animation = new Animation(document);
}
// animation.start();
export const start = () => {
    animation.start()
    canvas.style.display = "block"
}
export const stop = () => {
    animation.stop()
    canvas.style.display = "none"
}
// export const next = () => {
//     animation.stop();
//     canvas.style.display = "none"
// }